body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  * {
      box-sizing: border-box;
  }
  button {
      margin: 0;
      background: none;
      padding: 0;
  }
  /*
flex css 样式规则
class 含flex则被显示为felx布局,
flex-后面第1个字母表示flex-direction行（r）或列（c）
flex-后面第2个字母表示justify-content, s、e、a、b、c对应flex-start,flex-end,space-around,space-between,center
flex-后面第3个字母表示align-items, s、e、c对应flex-start,flex-end,center
*/

[class^='flex'] {
    display: flex;
}
[class^='flex-r'] {
    flex-direction: row;
}
[class^='flex-c'] {
    flex-direction: column;
}
[class^='flex-rs'] {
    justify-content: flex-start;
}
[class^='flex-re'] {
    justify-content: flex-end;
}
[class^='flex-ra'] {
    justify-content: space-around;
}
[class^='flex-rb'] {
    justify-content: space-between;
}
[class^='flex-rc'] {
    justify-content: center;
}
[class^='flex-cs'] {
    justify-content: flex-start;
}
[class^='flex-ce'] {
    justify-content: flex-end;
}
[class^='flex-ca'] {
    justify-content: space-around;
}
[class^='flex-cb'] {
    justify-content: space-between;
}
[class^='flex-cc'] {
    justify-content: center;
}
[class^='flex'][class$='s'] {
    align-items: flex-start;
    flex: 1;
}
[class^='flex'][class$='e'] {
    align-items: flex-end;
}
[class^='flex'][class$='c'] {
    align-items: center;
}

// 这是上面代码的展示。上面通过[]匹配类名
// .flex-rss
//     display flex
//     flex-direction row
//     justify-content flex-start
//     align-items flex-start

// .flex-res
//     display flex
//     flex-direction row
//     justify-content flex-end
//     align-items flex-start

// .flex-ras
//     display flex
//     flex-direction row
//     justify-content space-around
//     align-items flex-start

// .flex-rbs
//     display flex
//     flex-direction row
//     justify-content space-between
//     align-items flex-start

// .flex-rcs
//     display flex
//     flex-direction row
//     justify-content center
//     align-items flex-start

// .flex-rse
//     display flex
//     flex-direction row
//     justify-content flex-start
//     align-items flex-end

// .flex-ree
//     display flex
//     flex-direction row
//     justify-content flex-end
//     align-items flex-end

// .flex-rae
//     display flex
//     flex-direction row
//     justify-content space-around
//     align-items flex-end

// .flex-rbe
//     display flex
//     flex-direction row
//     justify-content space-between
//     align-items flex-end

// .flex-rce
//     display flex
//     flex-direction row
//     justify-content center
//     align-items flex-end

// .flex-rsc
//     display flex
//     flex-direction row
//     justify-content flex-start
//     align-items center

// .flex-rec
//     display flex
//     flex-direction row
//     justify-content flex-end
//     align-items center

// .flex-rac
//     display flex
//     flex-direction row
//     justify-content space-around
//     align-items center

// .flex-rbc
//     display flex
//     flex-direction row
//     justify-content space-between
//     align-items center

// .flex-rcc
//     display flex
//     flex-direction row
//     justify-content center
//     align-items center

// /*纵向*/
// .flex-css
//     display flex
//     flex-direction column
//     justify-content flex-start
//     align-items flex-start

// .flex-ces
//     display flex
//     flex-direction column
//     justify-content flex-end
//     align-items flex-start

// .flex-cas
//     display flex
//     flex-direction column
//     justify-content space-around
//     align-items flex-start

// .flex-cbs
//     display flex
//     flex-direction column
//     justify-content space-between
//     align-items flex-start

// .flex-ccs
//     display flex
//     flex-direction column
//     justify-content center
//     align-items flex-start

// .flex-cse
//     display flex
//     flex-direction column
//     justify-content flex-start
//     align-items flex-end

// .flex-cee
//     display flex
//     flex-direction column
//     justify-content flex-end
//     align-items flex-end

// .flex-cae
//     display flex
//     flex-direction column
//     justify-content space-around
//     align-items flex-end

// .flex-cbe
//     display flex
//     flex-direction column
//     justify-content space-between
//     align-items flex-end

// .flex-cce
//     display flex
//     flex-direction column
//     justify-content center
//     align-items flex-end

// .flex-csc
//     display flex
//     flex-direction column
//     justify-content flex-start
//     align-items center

// .flex-cec
//     display flex
//     flex-direction column
//     justify-content flex-end
//     align-items center

// .flex-cac
//     display flex
//     flex-direction column
//     justify-content space-around
//     align-items center

// .flex-cbc
//     display flex
//     flex-direction column
//     justify-content space-between
//     align-items center

// .flex-ccc
//     display flex
//     flex-direction column
//     justify-content center
//     align-items center
.flex-1 {
    flex: 1;
}

// 字体
.fs-12 {
    font-size: 12px;
}
.fs-14 {
    font-size: 14px;
}
.fs-16 {
    font-size: 16px;
}
.fs-18 {
    font-size: 18px;
}
.fs-22 {
    font-size: 22px;
}
.fs-26 {
    font-size: 26px;
}

// 内边距
.pd-5 {
    padding-left: 5px;
    padding-right: 5px;
}
.pt5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

// 外边距
.mg-t10 {
    margin-top: 10px;
}
.mg-b10 {
    margin-bottom: 10px;
}
.mg-l5 {
    margin-left: 5px;
}
.mg-r5 {
    margin-right: 5px;
}
.mg-l10 {
    margin-left: 10px;
}
.mg-r10 {
    margin-right: 10px;
}
// border 
.bor-b {
    border-bottom: 0.5px solid #e5e5e5;
}
.bor-t {
    border-top: 0.5px solid #e5e5e5;
}
.pos-r {
    position: relative;
}
.pos-a {
    position: absolute;
}
  